<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>MD5战争</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="wap-font-scale" content="no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="format-detection" content="telephone=no">
    <meta content="telephone=no" name="format-detection"/>

    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">

    <script>
        (function (doc, win, psdWidth) {
            let docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    let clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    clientWidth > psdWidth && (clientWidth = psdWidth);
                    docEl.style.fontSize = 100 * (window.devicePixelRatio > 1 ? 3 : 1) * (clientWidth / psdWidth) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);

            recalc();
        })(document, window, 1080);
    </script>
</head>
<style>
    .main {
        width: 95%;
        margin: 0 auto;
    }

    body {
        max-width: 1080px;
        margin: 0 auto;
        position: relative;
        min-width: 320px;
    }

    .hide {
        display: none;
    }

    .ta-center {
        text-align: center;
    }

    input {
        box-sizing: border-box;
        font-size: 16px;
        width: 100%;
        height: .5rem;
        border: 2px solid #ccc;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0);
        text-indent: 14px;
    }

    .text {
        font-size: 16px;
    }

    .split {
        height: .1rem;
        clear: both;
    }

    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    .word {
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        text-align: center;
        line-height: 0.4rem;
        border: 2px solid #cc0;
        font-size: 22px;
        margin: 5px;
    }

    .word.used {
        background: #f9ed7c;
    }

    .log-panel {
        border: 5px solid firebrick;
        border-radius: 10px;
        height: 2rem;
        overflow: auto;
        padding: 5px;
    }

    .log-panel em {
        color: #cd0200;
    }

    .log-panel em.green {
        color: green;
    }

    .hp-module {
        clear: both;
    }

    .hp-box {
        position: relative;
        border: 5px solid #9c5200;
        border-radius: 5px;
        box-sizing: border-box;
        width: 48%;
        height: .3rem;
    }

    .hp-blood {
        text-align: center;
        width: 100%;
        max-width: 100%;
        height: 100%;
        background: darkseagreen;
        transition: all 0.2s;
    }

    .blood-holder {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
    }

    .hp-skill {
        width: 0;
        max-width: 100%;
        height: 100%;
        background: #388eff;
        transition: all 0.2s;
    }

    .start-button {
        background: #ffe4bf;
        border-radius: 10px;
        box-sizing: border-box;
        height: .6rem;
        text-align: center;
        line-height: .6rem;
        cursor: pointer;
        font-size: 26px;
    }

    .data-button {
        background: #ffe4bf;
        border-radius: 10px;
        box-sizing: border-box;
        height: .4rem;
        text-align: center;
        line-height: .4rem;
        cursor: pointer;
        font-size: 26px;
    }

    .page-data {
        margin: 5px 0 0;
        overflow: hidden;
    }

    .page-data-box {
        width: 48%;
        min-height: 2rem;
        border: 2px solid #9c5200;
        padding: 2px;
    }

    .page-data-box div {
        border-bottom: 1px dashed #cccccc;
    }

    .page-data-box span {
        color: #9c5200;
    }

    .monster-group label {
        display: block;
        height: .5rem;
        line-height: .5rem;
        text-align: center;
    }

    .monster-group span {
        width: 100%;
        text-align: center;
    }

    .monster-group input {

    }

    input[type='radio'] {
        outline: none;
        margin: -2px 5px 1px 20px;
        width: 24px;
        height: 24px;
        vertical-align: middle;
        color: rgba(56, 71, 68, 1);
        -webkit-appearance: none;
        border: 1px solid #ddd;
        display: inline-block;
        border-radius: 50%;
    }

    input[type='radio']:checked:before {
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #108EE9;
        position: absolute;
        top: 4px;
        left: 4px;
    }

    input[type='radio']:checked {
        display: inline-block;
        border: 1px solid #108EE9;
        border-radius: 50%;
        position: relative;
    }
</style>
<body>
<div class="main">
    <div id="page-guide">
        <div class="split"></div>
        <div class="text">请输入您的姓氏：</div>
        <div class="split"></div>
        <input type="text" id="name1" placeholder="请输入您的姓氏" value="王"/>
        <div class="split"></div>
    </div>

    <div id="page-guide2">
        <div class="split"></div>
        <div class="text">请选择您的下一个对手：</div>
        <form class="monster-group">
            <label id="monster1"><span></span><input name="monster" type="radio" value=""/></label>
            <label id="monster2"><span></span><input name="monster" type="radio" value=""/></label>
            <label id="monster3"><span></span><input name="monster" type="radio" value=""/></label>
        </form>
        <div class="start-button" onclick="sureName()">确认</div>
    </div>

    <div id="page-1st" style="display: none">
        <div class="split"></div>
        <input type="text" id="name2" placeholder="姓名2" value="陈" style="display: none"/>
        <div class="split"></div>
        <div class="hp-module">
            <div class="hp-box fl">
                <div id="p1-blood" class="hp-blood"></div>
                <div class="blood-holder">
                    <span id="p1-cBlood">0</span>/<span id="p1-tBlood">0</span>
                </div>
            </div>
            <div class="hp-box fr">
                <div id="p2-blood" class="hp-blood"></div>
                <div class="blood-holder">
                    <span id="p2-cBlood">0</span>/<span id="p2-tBlood">0</span>
                </div>
            </div>
        </div>
        <div class="split"></div>
        <div class="hp-module">
            <div class="hp-box fl">
                <div id="p1-skill" class="hp-skill"></div>
                <div class="blood-holder">
                    <span id="p1-cSkill">0</span>/<span id="p1-tSkill">500</span>
                </div>
            </div>
            <div class="hp-box fr">
                <div id="p2-skill" class="hp-skill"></div>
                <div class="blood-holder">
                    <span id="p2-cSkill">0</span>/<span id="p2-tSkill">500</span>
                </div>
            </div>
        </div>
        <div class="split"></div>
        <div class="data-button" onclick="viewData()">数据对比</div>
        <div class="split"></div>
        <div id="start" class="start-button" onclick="start()">开始对战</div>
        <div class="split"></div>
    </div>
    <div id="page-2nd" class="" style="display: none">
        <div id="log-panel" class="log-panel">

        </div>
    </div>
    <div id="page-win" class="page-data" style="display: none">
        <div class="text">你获得的新字：<span id="new-word" style="color: #9c5200"></span></div>
        <div class="text">你现在的名字：<span id="new-name" style="color: #388eff"></span></div>
        <div class="data-button" onclick="modifyName()">修改名字</div>
        <div class="split"></div>
        <div class="start-button" onclick="goNextFight()">下一个敌人</div>
    </div>
    <div id="page-lose" class="page-data" style="display: none">
        <div class="text">你失去的字：<span id="lose-word" style="color: #9c5200"></span></div>
        <div class="text">你现在的名字：<span id="lose-name" style="color: #388eff"></span></div>
        <div class="data-button" onclick="modifyName()">修改名字</div>
        <div class="split"></div>
        <div class="start-button" onclick="goNextFight()">下一个敌人</div>
    </div>
    <div id="page-data" class="page-data" style="display: none">
        <div id="data-box1" class="page-data-box fl"></div>
        <div id="data-box2" class="page-data-box fr"></div>
        <div id="data-box3" class="page-data-box fr"></div>
        <div class="split"></div>
        <div id="data-button1" class="data-button" onClick="returnPage()">返回</div>
        <div class="split"></div>
        <div id="data-button2" class="start-button" onclick="goNextFight()">下一个敌人</div>
    </div>
</div>
</body>
<script type="application/javascript" src="js/name.js"></script>
<script type="application/javascript" src="js/store.js"></script>
<script type="application/javascript" src="js/md5.js"></script>
<script type="application/javascript" src="js/player.js?v=0.04"></script>
<script type="application/javascript" src="js/skill.js?v=0.04"></script>
<script type="application/javascript" src="js/log.js"></script>
<script type="application/javascript" src="js/main.js?v=0.04"></script>

<script>
    var isMade = false;
    var isStart = false;

    let player1;
    let player2;
    let battleData;
    let page0 = document.getElementById('page-guide');
    let page0_1 = document.getElementById('page-guide2');
    let page1 = document.getElementById('page-1st');
    let page2nd = document.getElementById('page-2nd');
    let startBtn = document.getElementById('start');
    let pageWin = document.getElementById('page-win');
    let pageData = document.getElementById('page-data');
    let pageLose = document.getElementById('page-lose');
    let newWord = document.getElementById('new-word');
    let loseWord = document.getElementById('lose-word');
    let newName = document.getElementById('new-name');
    let loseName = document.getElementById('lose-name');
    let logPanel = document.getElementById('log-panel');

    function refreshMonster () {
        if (sens.level === 1) {
            m1 = sens.makeName(sens.level, '小');
            m2 = sens.makeName(sens.level, '小');
        } else {
            m1 = sens.makeName(sens.level - 1);
            m2 = sens.makeName(sens.level - 1);
        }

        m3 = sens.makeName(sens.level);

        document.getElementById('monster1').querySelector('span').innerText = m1;
        document.getElementById('monster2').querySelector('span').innerText = m2;
        document.getElementById('monster3').querySelector('span').innerText = m3;
    }
    refreshMonster();
    sens.refreshMonster = refreshMonster;

    function hidePages () {
        page0.style.display = 'none';
        page0_1.style.display = 'none';
        page1.style.display = 'none';
        page2nd.style.display = 'none';
        pageData.style.display = 'none';
        pageWin.style.display = 'none';
        pageLose.style.display = 'none';
    }

    function sureName () {
        var name = document.getElementById('name1').value[0];
        if (player1 || name && sens.name1.indexOf(name) > -1) {
            player1 || (player1 = sens.makePlayer(name));

            function getRadioValue (radioName) {//得到radio的值
                var obj = document.getElementsByName(radioName);
                for (var i = 0; i < obj.length; i++) {
                    if (obj[i].checked) {
                        return obj[i].previousElementSibling.textContent;
                    }
                }
            }

            sens.monsterName = getRadioValue('monster');
            makePlayer();

            page0.style.display = 'none';
            page0_1.style.display = 'none';
            page1.style.display = '';
            logPanel.innerHTML = '';
            startBtn.style.display = '';
            document.getElementById('p2-blood').style.width = '100%';
            document.getElementById('p1-blood').style.width = '100%';
            document.getElementById('p1-skill').style.width = '0%';
            document.getElementById('p2-skill').style.width = '0%';
            document.getElementById('p1-cSkill').textContent = 0;
            document.getElementById('p2-cSkill').textContent = 0;
        }
    }

    function modifyName () {
        hidePages();
        pageData.style.display = '';
        pageData.querySelector('#data-button1').style.display = 'none';
        pageData.querySelector('#data-button2').style.display = '';

        var box1 = document.getElementById('data-box1');
        var box2 = document.getElementById('data-box2');
        var box3 = document.getElementById('data-box3');
        box3.style.display = '';
        box3.innerHTML = '';
        box2.style.display = 'none';
        let words = player1.words;
        words.slice(1).split('').forEach(function (word) {
            let span = document.createElement('span');
            span.classList.add('word');
            span.textContent = word;
            box3.appendChild(span);
        });

        let playerTemp = player1;
        player1 = sens.makePlayer(words[0], words);
        box3.onclick = function (e) {
            if (e.target.nodeName !== 'SPAN') return;
            playerTemp = player1;

            if (!e.target.used) {
                if (player1.oriName.length > 2) return;
                e.target.used = true;
                e.target.classList.add('used');
                player1 = sens.makePlayer(player1.oriName + e.target.textContent, words);
                box1.innerHTML = '';

                addData(box1, player1, playerTemp);
            } else {
                e.target.used = false;
                e.target.classList.remove('used');
                let idx = player1.oriName.indexOf(e.target.textContent);
                let name = player1.oriName.substring(0, idx) + player1.oriName.substring(idx + 1) ;
                player1 = sens.makePlayer(name, words);
                box1.innerHTML = '';

                addData(box1, player1, playerTemp);
            }
        }

        box1.innerHTML = '';
        box2.innerHTML = '';

        addData(box1, player1, playerTemp);

        function addData (box, player, player2) {
            var props = ['name', 'HP', 'att', 'def', 'int', 'skill', 'agl', 'spe', 'z'];
            let obj = {}

            props.forEach(function (item) {
                var div = document.createElement('div');
                if (player2 && typeof player[item] === 'number') {
                    let val = player[item] - player2[item];
                    div.innerHTML = `<em>${ item }</em>: <span>${ player[item] }</span> <span style="color: ${ val > 0 ? 'green' : 'red' }">${ val > 0 ? '+' + val : val }</span>`;
                } else {
                    div.innerHTML = `<em>${ item }</em>: <span>${ player[item] }</span>`
                }
                box.appendChild(div);
            });
        }
    }

    function goNextFight () {
        hidePages();
        page0_1.style.display = 'block';
    }

    function makePlayer () {
        player2 = sens.makePlayer(sens.monsterName);

        battleData = {
            p1: Object.assign({
                spd: 0,
                skillStore: player1.skill * 0.8 + player1.int * 0.2,
                aglStore: player1.agl,
                maxHp: player1.HP
            }, player1),
            p2: Object.assign({
                spd: 0,
                skillStore: player2.skill * 0.8 + player2.int * 0.2,
                aglStore: player2.agl,
                maxHp: player2.HP
            }, player2)
        };

        document.getElementById('p1-tBlood').textContent = battleData.p1.maxHp;
        document.getElementById('p1-cBlood').textContent = battleData.p1.maxHp;
        document.getElementById('p2-tBlood').textContent = battleData.p2.maxHp;
        document.getElementById('p2-cBlood').textContent = battleData.p2.maxHp;
        isMade = true;
    }

    function start () {
        if (!sens.monsterName) return;
        isStart = true;
        page2nd.style.display = '';
        startBtn.style.display = 'none';

        sens.start({
            battleData: battleData,
            onBloodChange: function (isP1, hpRatio) {
                hpRatio < 0 && (hpRatio = 0);

                if (isP1) {
                    document.getElementById('p2-blood').style.width = hpRatio * 100 + '%';
                } else {
                    document.getElementById('p1-blood').style.width = hpRatio * 100 + '%';
                }

                document.getElementById('p1-cBlood').textContent = battleData.p1.HP;
                document.getElementById('p1-tBlood').textContent = battleData.p1.maxHp;
                document.getElementById('p2-cBlood').textContent = battleData.p2.HP;
                document.getElementById('p2-tBlood').textContent = battleData.p2.maxHp;
            },
            onSkillChange: function (isP1, skillRatio) {
                skillRatio < 0 && (skillRatio = 0);

                if (isP1) {
                    document.getElementById('p1-skill').style.width = skillRatio * 100 + '%';
                } else {
                    document.getElementById('p2-skill').style.width = skillRatio * 100 + '%';
                }

                document.getElementById('p1-cSkill').textContent = parseInt(battleData.p1.skillStore);
                document.getElementById('p2-cSkill').textContent = parseInt(battleData.p2.skillStore);
            },
            onEnd: function (user) {
                if (user.oriName === player1.oriName) {
                    pageWin.style.display = '';
                    var word = sens.monsterName[Math.round(Math.random() * (sens.monsterName.length - 1))];
                    newWord.innerText = word;
                    if (player1.oriName.length === 1) {
                        newName.innerText = player1.oriName + word;
                    } else {
                        newName.innerText = player1.oriName;
                    }

                    let words =  (player1.words || '') + word;

                    player2 = player1;
                    player1 = sens.makePlayer(newName.innerText, words);
                } else {
                    if (player1.words.length === 1 ) {
                        alert('你连姓氏的字都输给对方了，重头再来吧！');
                        setTimeout(function () {
                            location.reload();
                        }, 2000);
                    } else {
                        pageLose.style.display = '';
                        let idx = Math.round(Math.random() * (player1.words.length - 2) + 1);
                        let word = player1.words[idx];
                        let idx2 = player1.name.indexOf(word);

                        loseWord.innerText = word;
                        loseName.innerText = idx2 > -1 ? (player1.oriName.substring(0, idx) + player1.oriName.substring(idx + 1)) : player1.oriName;
                        let words =  player1.words.substring(0, idx) + player1.words.substring(idx + 1) ;
                        player1 = sens.makePlayer(loseName.innerText, words);
                    }
                }

                refreshMonster();
                // page0_1.style.display = '';
                // page1.style.display = 'none';
                // page2nd.style.display = 'none';
            }
        });
    }

    function viewData () {
        document.getElementById('page-1st').style.display = 'none';
        document.getElementById('page-2nd').style.display = 'none';
        document.getElementById('page-data').style.display = '';

        var box1 = document.getElementById('data-box1');
        var box2 = document.getElementById('data-box2');
        var box3 = document.getElementById('data-box3');
        pageData.querySelector('#data-button1').style.display = '';
        pageData.querySelector('#data-button2').style.display = 'none';
        box3.style.display = 'none';
        box2.style.display = '';

        box1.innerHTML = '';
        box2.innerHTML = '';

        addData(box1, player1, player2);
        addData(box2, player2);

        function addData (box, player, player2) {
            var props = ['name', 'HP', 'att', 'def', 'int', 'skill', 'agl', 'spe', 'z'];

            props.forEach(function (item) {
                var div = document.createElement('div');
                if (player2 && typeof player[item] === 'number') {
                    let val = player[item] - player2[item];
                    div.innerHTML = `<em>${ item }</em>: <span>${ player[item] }</span> <span style="color: ${ val > 0 ? 'green' : 'red' }">${ val > 0 ? '+' + val : val }</span>`;
                } else {
                    div.innerHTML = `<em>${ item }</em>: <span>${ player[item] }</span>`
                }
                box.appendChild(div);
            });
        }
    }

    function returnPage () {
        document.getElementById('page-1st').style.display = '';
        isStart && (document.getElementById('page-2nd').style.display = '');
        document.getElementById('page-data').style.display = 'none';
    }
</script>
</html>